/*
 * @Author: xiaosihan 
 * @Date: 2023-08-05 19:54:36 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-21 17:06:22
 */


import CenterEditor from "@/editorComponent/CenterEditor/CenterEditor";
import ComponentSelect from "@/editorComponent/ComponentSelect/ComponentSelect";
import EditorScaleContor from "@/editorComponent/EditorScaleContor/EditorScaleContor";
import RightMenu from "@/editorComponent/RightMenu/RightMenu";
import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import preview3DRenderer from "@/editorComponent/preview3DRenderer";
import { useEffect, useRef } from "react";
import { useParams } from "react-router-dom";
import threeUtils from "three-base/threeUtils";
import EditorLeftMenu from "./EditorLeftMenu/EditorLeftMenu";
import EditorTopBar from "./EditorTopBar/EditorTopBar";
import Loadding from "./Loadding/Loadding";
import NoviceTip from "./NoviceTip/NoviceTip";
import styles from "./editor.module.less";
import setEditorDate from "./setEditorDate";
import userDesignService from "@/api/services/userDesignService";

interface Iprops {

}

// pc端的模版编辑器
export default function Editor() {

  const dom = useRef<HTMLDivElement | null>(null);
  const parame = useParams();
  // 加载模版的初始数据
  useEffect(() => {
    setTimeout(async () => {
      if (!editorStore.loadding) {
        if (parame.id) {
          const designData = await userDesignService.getDesignDataById(parame.id);
          setEditorDate(designData.ppId, designData);
        } else {
          setEditorDate();
        }
      }
    }, 200);
    return () => {
      editorStore.clearGoodsData();
      designEditor.clear();
      preview3DRenderer.clear();
    }

  }, []);

  // 自动调节缩放
  useEffect(() => {
    let width = 10;
    let height = 10;

    const resize = () => {
      if (dom.current) {
        if (width !== dom.current.clientWidth || height !== dom.current.clientHeight) {
          width = dom.current.clientWidth;
          height = dom.current.clientHeight;
          const maxScale = Math.min((width - 840), height - 120) / 1024;
          editorStore.setMaxScale(maxScale * 100);
        }
      }
    }

    threeUtils.addEventListener("requestAnimationFrame", resize);

    return () => {
      threeUtils.removeEventListener("requestAnimationFrame", resize);
      editorStore.setActiveComponent("");
    }
  });

  return (
    <>
      <div
        ref={dom}
        className={styles.editor}
      >
        {/* 加载动画 */}
        <Loadding />
        {/* 头部 */}
        {/* <EditorHerder /> */}
        {/* 顶部工具栏 */}
        <EditorTopBar />
        {/* 左侧菜单 */}
        <EditorLeftMenu />
        {/* 右侧菜单 */}
        <RightMenu />
        {/* 中间的编辑器 */}
        <CenterEditor
          onMouseLeave={() => {
            // saveMyDesign();
          }}
        />
        {/* 部位选择器 */}
        <ComponentSelect />
        {/* 编辑器控制器 */}
        <EditorScaleContor />
      </div>
      {/* 新手提示 */}
      <NoviceTip />
    </>
  );

}